<template>
	<view class="changePhone">
		<!-- 提示 -->
		<text class="tishi">请输入你需要绑定的新手机号</text>
		<!--  -->
		<view class="item">
			<text>国家和地区</text>
			<view class="phone">
				<text>中国大陆 86</text>
				<uni-icons type="forward" size="16" color="grey"></uni-icons>
			</view>
		</view>
		<view class="item">
			<text>新手机号</text>
			<el-input v-model="phone" placeholder="请输入新手机号"></el-input>
		</view>
		<view class="btnBox">
			<el-button style='width: 90%; border: none; background: rgb(39,209,213); color: white; margin: 0 auto;'
				@click="router('/pages/person/setUp/securityChild/changePhoneTwo')">下一步</el-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				username: ''
			};
		},
		onShow() {
			const username = getApp().globalData.username
			this.username = username
		},
		methods: {
			// 判断是否为正确的手机号
			isPoneAvailable(phone) {
				let myreg = /^[1][2,3,4,5,6,7,8,9][0-9]{9}$/;
				if (!myreg.test(phone)) {
					return false;
				} else {
					return true;
				}
			},
			router(path) {
				if (this.phone == "") {
					uni.showToast({
						title: '对不起，信息输入不能为空',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				if (!this.isPoneAvailable(this.phone)) {
					uni.showToast({
						title: '对不起，手机号不正确',
						duration: 2000,
						icon: 'none'
					});
					return 
				} else {
					if(this.username !== this.phone) {
						uni.navigateTo({
							url: `${path}?phone=${this.phone}`
						});
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	/deep/ .el-input {
		width: 70%;
		vertical-align: middle;
	}

	/deep/ .el-input__inner {
		border: none;
	}

	.changePhone {
		width: 100vw;
		height: calc(100vh - 88upx);
		background: rgb(242, 243, 247);
		overflow: hidden;

		.tishi {
			display: block;
			padding: 20upx;
			font-size: 26upx;
			color: grey;
		}

		.item {
			height: 100upx;
			box-sizing: border-box;
			padding: 0 40upx;
			margin: 4upx 0;
			font-size: 28upx;
			font-weight: bold;
			background: white;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.phone {
				display: flex;
				align-items: center;

				text {
					margin-right: 20upx;
				}
			}
		}

		.btnBox {
			width: 100%;
			margin: 30upx 0 0;
			display: flex;
		}
	}
</style>
